<template>
  <div class="content">
    <div class="top">
      <van-icon name="arrow-left" size="20" color="#aaa" @click="router.go(-1)"/>
    </div>
    <div class="login box" v-show="loginActive">
      <h1 class="title">您好, &nbsp;请登录</h1>
      <div class="form">
        <van-form @submit="onSubmitA">
            <van-field
              class="phone"
              v-model="phoneA"
              name="user_phone"
              placeholder="手机号"
              :rules="[{ required: true, message: '请输入手机号' }]"
            />
            <van-field
              v-model="passwordA"
              type="password"
              name="user_pwd"
              placeholder="密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            />
            <div class="checkbox">
              <van-checkbox class="checked" v-model="checkedA" shape="square" checked-color="#29A3E6" icon-size="14">
                登录即同意
              </van-checkbox> 
              <div class="p1"><span>《用户使用协议》</span>和<span>《隐私政策》</span></div>
            </div>
            <div class="submit">
              <van-button class="btn" round block native-type="submit">
              登录
              </van-button>
            </div>
            <div>
              <span @click="loginActive=!loginActive">新用户注册 &gt; </span>
            </div>
        </van-form>
      </div>
    </div>
    <div class="register box" v-show="!loginActive">
      <h1 class="title">您好, &nbsp;请注册</h1>
      <div class="form">
        <van-form @failed="onFailed" @submit="onSubmitB">
            <van-field
              class="name"
              v-model="name"
              name="user_name"
              placeholder="用户名"
              :rules="[{ required: true, message: '请输入用户名' }]"
            />
            <van-field name="user_sex">
              <template #input>
                <van-radio-group v-model="checkedC" direction="horizontal" icon-size="16">
                  <van-radio name="1">男</van-radio>
                  <van-radio name="0">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              class="phone"
              v-model="phoneB"
              name="user_phone"
              placeholder="手机号"
              :rules="[{ required: true, message: '请输入手机号' },{ pattern, message: '手机号不合法' },{ validator: asyncValidator, message: '该手机号已存在' }]"
            />
            <van-field
              v-model="passwordB"
              type="password"
              name="user_pwd"
              placeholder="密码"
              :rules="[{ required: true, message: '请输入密码' },{ validator, message: '请输入至少6位密码' }]"
            />
            <div class="checkbox">
              <van-checkbox class="checked" v-model="checkedB" shape="square" checked-color="#29A3E6" icon-size="14">
                已阅读并同意
              </van-checkbox> 
              <div class="p2"><span>《用户使用协议》</span>和<span>《隐私政策》</span></div>
            </div>
            <div class="submit">
              <van-button class="btn" round block native-type="submit">
              注册
              </van-button>
            </div>
            <div>
              <span @click="loginActive=!loginActive">已注册,直接去登录 &gt; </span>
            </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import httpApi from '@/http'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import {showToast,showLoadingToast,closeToast} from 'vant'
import 'vant/es/toast/style'

const router = useRouter()
const store = useStore()

const loginActive = ref(true)
const phoneA = ref('')
const passwordA = ref('')
const checkedA = ref(false)
const onSubmitA = (values) => {
  if(checkedA.value) {
    // console.log('submit', values)
    httpApi.userApi.login(values).then(res=>{
      // console.log('登录结果', res)
      if(res.data.code==200){

        store.commit('updateUser', res.data.data.user)
        store.commit('saveToken', res.data.data.token)
        
        phoneA.value = ''
        passwordA.value = ''
        checkedA.value = false
        showToast('登录成功')
        // router.go(-1)
        router.push('/')
      }else {
        showToast(res.data.msg)
      }
    })
  }else {
    showToast('请同意协议后再提交')
  }
}

const name = ref('')
const checkedC = ref('')
const phoneB = ref('')
const passwordB = ref('')
const checkedB = ref(false)
const pattern = /^1[3-9]\d{9}$/

const validator = (val) => {
  if(val.length<6){
    return false
  }else {
    return true
  }
}

const asyncValidator = (val) =>
new Promise((resolve) => {
  showLoadingToast('验证中...')
  let value = true
  httpApi.userApi.queryPhone({user_phone:val}).then(res=>{
    // console.log('手机号结果',res)
    if(res.data.code==300) {
      value = false
    }
  })
  setTimeout(() => {
    closeToast();
    resolve(value)
  }, 500)
})

const onFailed = (values) => {
  // console.log('failed', values)
}
const onSubmitB = (values) => {
  if(checkedB.value){
    // console.log('submit', values)
    httpApi.userApi.register(values).then(res=>{
      // console.log('注册结果', res)
      if(res.data.code==200){
        showToast('注册成功')
        phoneA.value = phoneB.value
        passwordA.value = ''
        name.value = ''
        checkedC.value = ''
        phoneB.value = ''
        passwordB.value = ''
        checkedB.value = false
        loginActive.value = true
      }else {
        showToast(res.data.msg)
      }
    })
  }else {
    showToast('请同意协议后再提交')
  }
}

</script>

<style lang="scss" scoped>
.content {
  padding: 15px 5px;
  .top {
    padding: 0 5px;
  }
  .box {
    margin-top: 45px;
    .title {
      padding: 0 15px;
      font-weight: 400;
      margin-bottom: 40px;
    }
    .form {
      .checkbox {
        font-size: 12px; 
        margin: 20px 15px 15px;
      }
      .submit {
        margin:  30px 13px 13px;
        .btn {
          background-image: linear-gradient(to right,#7FEDF1,#82C1F7);
          color: #fff;
          font-size: 16px;
          border: 0;
        }
      }
      .submit+div {
        padding-right: 25px;
        text-align: right;

        span {
          font-size: 12px;
        }
      }
    }
  }

  .p1 {
    margin: -19px 0 0 82px;
    >span {
          color: #29A3E6;
    }
  }
  .p2 {
    margin: -19px 0 0 94px;
    >span {
      color: #29A3E6;
    }
  }
}
</style>